@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
  margin: 0;
  background: var(--body-background-color);
  color: var(--primary-text);
}

//
// General ampd specific rules
//

.bg {
  background: var(--body-background-color);
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -1;
}

.text-muted {
  color: #868e96 !important;
}

.clickable {
  cursor: pointer;
}

.mat-accent {
  @apply dark:text-black;
}

//
// Tailwind usages
//

.heading-1 {
  @apply mb-6 text-4xl font-bold tracking-tight leading-none md:text-5xl lg:text-6xl;
}

.heading-2 {
  @apply mb-6 mt-2 text-xl font-bold tracking-tight leading-none md:text-2xl lg:text-3xl;
}

.browse-title {
  @apply flex flex-col md:flex-row gap-x-3 mt-4 mb-8 font-semibold text-lg justify-center md:justify-start gap-y-8;
}

.page-title {
  @extend .heading-2;
  @apply mb-8;
}

.page-sub-title {
  @apply mb-4 pt-4 font-semibold text-lg;
}

.ampd-code {
  @apply font-mono;
  @extend .accent-text;
}

.settings-grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-8;
}

.fe-setting-label {
  @apply my-2;
  @apply text-muted;
}

//
// Material overrides
//

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: inherit !important;
}

.mat-mdc-form-field-focus-overlay {
  background-color: inherit !important;
}

.accent-text {
  color: var(--accent-color) !important;
}

.accent-text-hover:hover {
  color: var(--accent-color) !important;
}

mat-toolbar > div > .mat-mdc-button-base.mat-accent {
  color: var(--accent-color) !important;
}

.browse-list-item {
  @apply flex flex-row justify-between items-center p-2 gap-x-4;
  font-size: larger;
  background: var(--second-background-color);
  border: 1px solid var(--border-color);
  @apply rounded-lg;
}

.browse-list-item:hover {
  cursor: pointer;
  background: var(--hover-background-color);
}

.hover-background-color:hover {
  background: var(--hover-background-color) !important;
}

.now-playing-row {
  background: var(--accent-color) !important;
}
